<template>
	<div class="system-role-container layout-padding">
		<div class="system-role-padding layout-padding-auto">
            <el-card shadow="hover" style="display: flex; flex-direction: column; flex: 1; height: inherit">
				<section style="flex: 1; height: inherit;overflow-y: auto;">
                    <el-form ref="ruleFormRef" :model="state.upgradeData" :rules="rules" label-width="220px">
                        <section class="font16 px10 pl20 borderRadius5" style="background:var(--el-color-primary-light-9);">
                            <p>代理升级</p>
                        </section>
						<el-form-item label="代理主动升级：">
                            <section style="display: flex; flex-direction: column;">
                                <el-switch v-model="state.upgradeData.upgradeIsInitiative" :active-value=1 :inactive-value=0 />
                                <explainBox msg="开启后，代理可以根据当前设置， 选择升级；关闭后，只能总部手动为代理升级" color="var(--el-color-primary-light-2)" />
                            </section>
                        </el-form-item>
                        <el-divider />
						<section v-if="state.upgradeData.upgradeIsInitiative == 1">
                            <el-form-item label="代理升级条件：">
                                <section style="display:block;">
                                    <el-radio-group v-model="state.upgradeData.upgradeIsCondition">
                                        <el-radio :label=0>无条件</el-radio>
                                        <el-radio :label=1>需满足规定条件</el-radio>
                                    </el-radio-group>
                                    <section>
                                        <explainBox msg="设置无条件升级，仅支持代理手动发起升级申请" color="var(--el-color-primary-light-2)"  />
                                    </section>
                                </section>
                            </el-form-item>
                            <section v-if="state.upgradeData.upgradeIsCondition == 1">
                                <el-form-item label="代理发起条件：" prop="upgradeMode">
                                    <el-radio-group v-model="state.upgradeData.upgradeMode">
                                        <el-radio :label=0>代理满足升级条件自动发起升级</el-radio>
                                        <el-radio :label=1>代理满足条件需手动发起申请</el-radio>
                                    </el-radio-group>
                                </el-form-item>
                                <el-form-item label="代理条件审核设置：" prop="auditMode">
                                    <el-radio-group v-model="state.upgradeData.auditMode">
                                        <el-radio :label=0>自动审核</el-radio>
                                        <el-radio :label=1>手动审核</el-radio>
                                    </el-radio-group>
                                </el-form-item>
                                <el-form-item label="代理申请审核人：" prop="auditorType">
                                    <el-checkbox-group v-model="state.upgradeData.auditorType">
                                        <el-checkbox :label=0 :key=0 >总部</el-checkbox>
                                        <el-checkbox :label=3 :key=3 >升级前进货上级</el-checkbox>
                                        <el-checkbox :label=1 :key=1 >团队长</el-checkbox>
                                        <el-checkbox :label=2 :key=2 >升级后进货上级</el-checkbox>
                                    </el-checkbox-group>
                                </el-form-item>
                                <el-form-item label="代理升级条件设置：" v-if="state.agentLevelList.length > 1">
                                    <el-checkbox-group v-model="state.upgradeData.levelIds" @change="agentLevelFun">
                                        <el-checkbox v-for="(item,index) in state.agentLevelList" 
                                            v-show="index+1 != state.agentLevelList.length" 
                                            :label="item.agentLevelId"  :key="item.agentLevelId" >
                                            {{ item.agentName }}
                                        </el-checkbox>
                                    </el-checkbox-group>
                                </el-form-item>
                                <el-form-item label="">
                                    <section class="px15 mb20" v-for="(item,index) in state.upgradeData.mechanisms" :key="index" style="background: var(--el-color-white);  width: 100%; border-radius: 4px;
                                        border: 1px solid var(--el-border-color-light); overflow: hidden;">
                                        <div>
                                            <div class="topArea" style="display: flex;justify-content: space-between;">
                                                <span>升级{{item.agentLevelName}}条件</span>
                                                <section>
                                                    <el-link class="font16" :underline="false" type="primary" @click="delJIZHI(index)">删除</el-link>
                                                    <span style="color:var(--el-color-primary);">&nbsp;|&nbsp;</span>
                                                    <el-link class="font16" :underline="false" type="primary"  @click="addJIZHI(index)">新增机制</el-link>
                                                </section>
                                            </div>
                                            <div class="contentArea">
                                                <section v-for="(itemX,indexX) in item.mechanisms" :key="indexX">
                                                    <el-form ref="form" label-width="300">
                                                        <el-form-item label="设置以下类型可以按此条件升级：">
                                                            <el-checkbox-group v-model="itemX.applyAgentLevelIds">
                                                                <el-checkbox v-for="itemz in state.agentLevelList" 
                                                                    v-show="itemz.agentLevel < item.agentLevel" :label="itemz.agentLevelId" :key="itemz.agentLevelId" >
                                                                    {{ itemz.agentName }}
                                                                </el-checkbox>
                                                            </el-checkbox-group>
                                                        </el-form-item>
                                                        <section v-for="(itemY,indexY) in itemX.conditions" :key="indexY">
                                                            <el-form-item label="直接服务条件：" v-if="itemY.conditionType == 0" class="mb15">
                                                                <section style="display: flex;">
                                                                    在
                                                                    <el-select v-model="itemY.conditionMonth" class="width150 ml5 mr5" placeholder="请选择" >
                                                                        <el-option v-for="(item,index) in state.query.timeList" :key="index" :value="item.value" :label="item.label"></el-option>
                                                                    </el-select>
                                                                    内，直接服务
                                                                    <el-select v-model="itemY.symbol" class="width150 ml5 mr5" placeholder="请选择">
                                                                        <el-option  key="0" label="等于" :value=2> </el-option>
                                                                        <el-option  key="1" label="大于等于" :value=4> </el-option>
                                                                        <el-option  key="2" label="小于等于" :value=1> </el-option>
                                                                    </el-select>
                                                                    <el-select v-model="itemY.inviteeAgentId" class="width150 ml5 mr5" placeholder="请选择">
                                                                        <el-option v-for="(item,index) in state.agentLevelList" :key="index" :value="item.agentLevelId" :label="item.agentName"></el-option>
                                                                    </el-select>
                                                                    <el-select v-model="itemY.serviceType" class="width150 ml5 mr5" placeholder="请选择">
                                                                        <el-option  key="0" label="数量" :value=0> </el-option>
                                                                        <el-option  key="1" label="业绩" :value=1> </el-option>
                                                                    </el-select>
                                                                    不低于
                                                                    <el-input v-model="itemY.serviceValue" class="width150 ml5 mr5" placeholder="请输入">
                                                                        <template #append> {{ itemY.serviceType == 0 ? '人' : '元' }}</template>
                                                                    </el-input>
                                                                </section>
                                                            </el-form-item>
                                                            <el-form-item label="团队服务条件：" v-if="itemY.conditionType == 1" class="mb15">
                                                                <section style="display: flex;">
                                                                    在
                                                                    <el-input :disabled="itemY.conditionValidityType == 3" class="width200" placeholder="请输入" v-model="itemY.conditionMonth">
                                                                        <template #append>
                                                                            <el-select class="width80" placeholder=""  v-model="itemY.conditionValidityType">
                                                                                <el-option label="日" :value=0 />
                                                                                <el-option label="月" :value=1 />
                                                                                <el-option label="年" :value=2 />
                                                                                <el-option label="不限" :value=3 />
                                                                            </el-select>
                                                                        </template>
                                                                    </el-input>
                                                                    内，直接服务
                                                                    <el-select v-model="itemY.symbol" class="width150 ml5 mr5" placeholder="请选择">
                                                                        <el-option  key="0" label="等于" :value=2> </el-option>
                                                                        <el-option  key="1" label="大于等于" :value=4> </el-option>
                                                                        <el-option  key="2" label="小于等于" :value=1> </el-option>
                                                                    </el-select>
                                                                    <el-select v-model="itemY.inviteeAgentId" class="width150 ml5 mr5" placeholder="请选择">
                                                                        <el-option v-for="(item,index) in state.agentLevelList" :key="index" :value="item.agentLevelId" :label="item.agentName"></el-option>
                                                                    </el-select>
                                                                    <el-select v-model="itemY.serviceType" class="width150 ml5 mr5" placeholder="请选择">
                                                                        <el-option  key="0" label="数量" :value=0> </el-option>
                                                                        <el-option  key="1" label="业绩" :value=1> </el-option>
                                                                    </el-select>
                                                                    不低于
                                                                    <el-input v-model="itemY.serviceValue" class="width150 ml5 mr5" placeholder="请输入">
                                                                        <template #append> {{ itemY.serviceType == 0 ? '人' : '元' }}</template>
                                                                    </el-input>
                                                                </section>
                                                            </el-form-item>
                                                            <el-form-item label="累计充值：" v-if="itemY.conditionType == 3" class="mb15">
                                                                <section style="display: flex;">
                                                                    <el-input v-model.number="itemY.rechargeSum" type="number" class="width150 ml5 mr5" placeholder="请输入"></el-input>
                                                                    <el-select v-model="itemY.relation" class="width150 ml5 mr5" placeholder="请选择">
                                                                        <el-option  key="0" label="或者" :value=0> </el-option>
                                                                        <el-option  key="1" label="并且" :value=1> </el-option>
                                                                    </el-select>
                                                                    <el-input :disabled="itemY.conditionValidityType == 3" class="width200" placeholder="请输入" v-model="itemY.conditionMonth">
                                                                        <template #append>
                                                                            <el-select class="width80" placeholder=""  v-model="itemY.conditionValidityType">
                                                                                <el-option label="日" :value=0 />
                                                                                <el-option label="月" :value=1 />
                                                                                <el-option label="年" :value=2 />
                                                                                <el-option label="不限" :value=3 />
                                                                            </el-select>
                                                                        </template>
                                                                    </el-input>
                                                                    内充值达
                                                                    <el-input v-model.number="itemY.recharge" type="number" class="width150 ml5 mr5"  placeholder="请输入"></el-input>
                                                                </section>
                                                            </el-form-item>
                                                            <el-form-item label="累计进货：" v-if="itemY.conditionType == 6" class="mb15">
                                                                <section style="display: flex;">
                                                                    <el-input v-model.number="itemY.purchaseSum" type="number" class="width150 ml5 mr5" placeholder="请输入"></el-input>
                                                                    <el-select v-model="itemY.relation" class="width150 ml5 mr5" placeholder="请选择">
                                                                        <el-option  key="0" label="或者" :value=0> </el-option>
                                                                        <el-option  key="1" label="并且" :value=1> </el-option>
                                                                    </el-select>
                                                                    <el-input :disabled="itemY.conditionValidityType == 3" class="width200" placeholder="请输入" v-model="itemY.conditionMonth">
                                                                        <template #append>
                                                                            <el-select class="width80" placeholder=""  v-model="itemY.conditionValidityType">
                                                                                <el-option label="日" :value=0 />
                                                                                <el-option label="月" :value=1 />
                                                                                <el-option label="年" :value=2 />
                                                                                <el-option label="不限" :value=3 />
                                                                            </el-select>
                                                                        </template>
                                                                    </el-input>
                                                                    内进货达
                                                                    <el-input v-model.number="itemY.purchase"  type="number"class="width150 ml5 mr5" placeholder="请输入"></el-input>
                                                                </section>
                                                            </el-form-item>
                                                            <el-form-item label="商品累计购买：" v-if="itemY.conditionType == 7" class="mb15">
                                                                <section style="display: flex;">在
                                                                    <el-input :disabled="itemY.conditionValidityType == 3" class="width200" placeholder="请输入" v-model="itemY.conditionMonth">
                                                                        <template #append>
                                                                            <el-select class="width80" placeholder=""  v-model="itemY.conditionValidityType">
                                                                                <el-option label="日" :value=0 />
                                                                                <el-option label="月" :value=1 />
                                                                                <el-option label="年" :value=2 />
                                                                                <el-option label="不限" :value=3 />
                                                                            </el-select>
                                                                        </template>
                                                                    </el-input>
                                                                    累计购买商品 <el-link class="font16" :underline="false" type="primary" v-show="itemY.skuName">【{{  itemY.skuName }}】</el-link>
                                                                    <el-input v-model="itemY.skuNum" class="width150 ml5 mr5" placeholder="请输入"></el-input>件
                                                                    <el-button class="ml20 mr20" :underline="false" type="primary" @click="addGoodsFile(index,indexX,indexY)">选择商品</el-button>
                                                                </section>
                                                            </el-form-item>
                                                       </section>
                                                       <section v-for="(itemY,indexY) in itemX.uniqueConditions" :key="indexY">
                                                            <el-form-item label="代理一次性充值：" v-if="itemY.conditionType == 4">
                                                                <section style="display: flex;">
                                                                    <el-input v-model="itemY.skuNum" class="width150 ml5 mr5" placeholder="请输入"></el-input>
                                                                </section>
                                                            </el-form-item>
                                                            <el-form-item label="代理一次性补货：" v-if="itemY.conditionType == 5">
                                                                <section style="display: flex;flex-direction: column;">
                                                                <section>
                                                                        自主选购不低于
                                                                        <el-input v-model="itemY.skuNum" class="width150 ml5 mr5" placeholder="请输入">
                                                                    </el-input>
                                                                </section>
                                                                    <el-form-item label="升级补货对象：" label-width="auto">
                                                                        <section style="display: flex;">
                                                                            <el-radio-group v-model="itemY.skuNum">
                                                                                <el-radio :label=0>总部</el-radio>
                                                                                <el-radio :label=1>进货上级</el-radio>
                                                                            </el-radio-group>
                                                                        </section>
                                                                    </el-form-item>
                                                                    <el-form-item label="升级补货折扣：" label-width="auto">
                                                                        <section style="display: flex;">
                                                                            <el-radio-group v-model="itemY.skuNum">
                                                                                <el-radio :label=0>默认折扣</el-radio>
                                                                                <el-radio :label=1>自定义折扣</el-radio>
                                                                            </el-radio-group>
                                                                            <el-input v-model="itemY.skuNum" class="width150 ml5 mr5" placeholder="请输入"></el-input>
                                                                        </section>
                                                                    </el-form-item>
                                                                </section>
                                                            </el-form-item>
                                                        </section>
                                                        <el-form-item label=" ">
                                                            <el-link class="font16" :underline="false" type="primary" @click="addCondition(index,indexX,itemX.selectId)">添加条件</el-link>
                                                            <span style="color:var(--el-color-primary);">&nbsp;|&nbsp;</span>
                                                            <el-link class="font16" :underline="false" type="primary" @click="delItem(index,indexX)">删除机制</el-link>
                                                        </el-form-item>
                                                    </el-form>  
                                                </section>
                                            </div>
                                        </div>
                                    </section>
                                </el-form-item>
                            </section>
                        </section>
                    </el-form>
                </section>
                <section style="text-align: center; margin:10px 0;">
                    <el-button type="primary" @click="submitForm(ruleFormRef)">提交</el-button>
                </section>
            </el-card>
            <AddConditions ref="AddConditionsRef" @selectFun="selectFun" />
            <useTypeDialog ref="useTypeDialogRef" @useTypeListFun="useTypeListFun" />
            <goodSelectDialog :isMultiSelect="false" ref="goodSelectDialogRef" @goodsSubmitFun="goodsSubmitFun" />
        </div>
	</div>
</template>
<script setup lang="ts" name="funWangEditor">
import { reactive, onMounted, ref, defineAsyncComponent } from 'vue';
import { configData } from '/@/api/common';
import { agentList, postUpgrade, getUpgrade  } from "/@/api/agent";
import type { FormInstance, FormRules } from 'element-plus'
import { ElMessageBox, ElMessage } from 'element-plus';
import { useRoute } from 'vue-router';
const route = useRoute();
const AddConditions = defineAsyncComponent(() => import('/@/views/agent/upgrade/components/addConditions.vue'))
const useTypeDialog = defineAsyncComponent(() => import('/@/components/createGoods/useTypeDialog.vue'))
// 引入组件
const goodSelectDialog = defineAsyncComponent(() => import('/@/components/dialog/goodSelect.vue'));
// 定义变量内容
const goodSelectDialogRef = ref();
const useTypeDialogRef = ref()
const emit = defineEmits(['stepChange'])
const ruleFormRef = ref<FormInstance>()
const AddConditionsRef = ref()
const state = reactive({
    index1: null,
    index2: null,
    index3: null,
    query: {
        // 时间选择
		timeList: [
			{ value: 0, label: '不限时间' },
            { value: 1, label: '1个月' },
            { value: 2, label: '2个月' },
            { value: 3, label: '3个月' },
            { value: 4, label: '4个月' },
            { value: 5, label: '5个月' },
            { value: 6, label: '6个月' },
            { value: 7, label: '7个月' },
            { value: 8, label: '8个月' },
            { value: 9, label: '9个月' },
            { value: 10, label: '10个月' },
            { value: 11, label: '11个月' },
            { value: 12, label: '12个月' },
            { value: 13, label: '13个月' },
            { value: 14, label: '14个月' },
            { value: 15, label: '15个月' },
            { value: 16, label: '16个月' },
            { value: 17, label: '17个月' },
            { value: 18, label: '18个月' },
            { value: 19, label: '19个月' },
            { value: 20, label: '20个月' },
            { value: 21, label: '21个月' },
            { value: 22, label: '22个月' },
            { value: 23, label: '23个月' },
            { value: 24, label: '24个月' },
            { value: 25, label: '25个月' },
            { value: 26, label: '26个月' },
            { value: 27, label: '27个月' },
            { value: 28, label: '28个月' },
            { value: 29, label: '29个月' },
            { value: 30, label: '30个月' },
            { value: 31, label: '31个月' },
            { value: 32, label: '32个月' },
            { value: 33, label: '33个月' },
            { value: 34, label: '34个月' },
            { value: 35, label: '35个月' },
            { value: 36, label: '36个月' }
		],
    },
    agentLevelList: [] as Array<any>,
    upgradeData:{
        upgradeIsInitiative: 0,   //  否主动升级0否 1是
        upgradeIsCondition: 0,  //0 无条件 1需满足规定条件
        upgradeMode: 0, // 0 自动升级 1 手动升级
        auditMode: 0, //审核方式  0 自动审核  1手动审核
        auditorType: [], // 审核人类型
        levelIds:[],
        mechanisms: [] as Array<any>, //代理升级机制
    },
    tableData:[{}]
})


const rules = reactive<FormRules<any>>({
	couponBaseType: [{ required: true, message: '请选择优惠券类型', trigger: 'change' }],
	name: [{ required: true, message: '请输入优惠券名称', trigger: 'blur' }],
	money: [{ required: true, message: '请选择优惠券面值', trigger: 'blur' }],
	type: [{ required: true, message: '请选择优惠券领取方式', trigger: 'change' }],
	useType: [{ required: true, message: '请选择优惠券使用类型', trigger: 'change' }],
})

// 删除机制
const delJIZHI = (val:number) => {
    state.upgradeData.mechanisms.splice(val,1)
    state.upgradeData.levelIds = state.upgradeData.mechanisms.map(obj => obj.agentLevelId);
}

// 新增机制
const addJIZHI = (val: number) => {
	state.upgradeData.mechanisms[val].mechanisms.push({ conditions:[],selectId:null})
}

// 使用类型选择弹窗
const addGoodsFile = (index:any,indexX:any,indexY:any) => {
    state.index1 = index;
    state.index2 = indexX;
    state.index3 = indexY;
    goodSelectDialogRef.value.openDialog();
}

// 选中关联商品
const goodsSubmitFun = (list: any) =>{
    if(list.length > 0){
        state.upgradeData.mechanisms[state.index1].mechanisms[state.index2].conditions[state.index3].skuName = list[0].spuName;
        state.upgradeData.mechanisms[state.index1].mechanisms[state.index2].conditions[state.index3].skuId = list[0].skuId
    }
}

// 获取商品品牌列表
const getAgentList = async () => {
	const { results } = await agentList();
	state.agentLevelList = results;
}

// 获取代理升级数据
const getUpgradeFun = async () => {
	const { results } = await getUpgrade();
    state.upgradeData.upgradeIsInitiative = results.base.upgradeIsInitiative;
    state.upgradeData.upgradeIsCondition = results.base.upgradeIsCondition;
    state.upgradeData.upgradeMode = results.base.upgradeMode;
    state.upgradeData.auditMode = results.base.auditMode;
    state.upgradeData.auditorType = results.base.auditorType;
    state.upgradeData.mechanisms =results.mechanisms;
    state.upgradeData.levelIds = results.mechanisms.map(obj => obj.agentLevelId);
}

// 页面加载时
onMounted(()  => {
    getAgentList();
    getUpgradeFun()
});

 
// 添加条件
const addCondition = (index:number,indexX:number,id:number) => {
    AddConditionsRef.value.openDialog(index,indexX,id);
}

// 选择条件返回值
const selectFun = (index:any,indexX:any,id:any,idList:any) => {
    console.log(idList);
    idList.map((x:any,i:number)=>{
        state.upgradeData.mechanisms[index].mechanisms[indexX].conditions.push({
            conditionType:x
        })
    })
    // 非重复条件
    if(id != null){
        state.upgradeData.mechanisms[index].mechanisms[indexX].uniqueConditions = [{
            conditionType:id
        }]
    }
    
}



// 删除机制
const delItem = (index:any,indexX:any,) => {
    state.upgradeData.mechanisms[index].mechanisms.splice(indexX,1)
}


const agentLevelFun = () => {
    //  根据当前付费会员等级生成会员积分数据
    let dataList = []as Array<any>;
    state.upgradeData.levelIds.map((item:any) => {
        let selectData = state.agentLevelList.find(obj => obj.agentLevelId == item);
        console.log(JSON.stringify(selectData))
        let dataItem = {
            agentLevelId: selectData.agentLevelId, // 代理等级ID
            agentLevelName: selectData.agentName,  // 代理等级名称
            agentLevel: selectData.agentLevel,  // 权重ID
            mechanisms: [{ conditions:[],uniqueConditions:[]}], //代理升级条件列表
        };
        dataList.push(dataItem);
    })
    state.upgradeData.mechanisms = dataList;
}


// 代理升级信息提交
const submitForm = async (formEl: FormInstance | undefined) => {
	if (!formEl) return
	await formEl.validate( async (valid, fields) => {
		if (valid) {
			let params = {
                base:{
                    upgradeIsInitiative: state.upgradeData.upgradeIsInitiative, // 代理是否主动升级
                    upgradeIsCondition: state.upgradeData.upgradeIsCondition,  // 代理升级条件
                    upgradeMode: state.upgradeData.upgradeMode,// 代理发起条件
                    auditMode: state.upgradeData.auditMode,// 代理条件审核设置
                    auditorType: state.upgradeData.auditorType, // 审核人类型设置
                },
                mechanisms: state.upgradeData.mechanisms,
            }
            const { method } = await postUpgrade(params);
            if(method == 'success'){
                ElMessage.success('提交成功');
                // window.location.reload();
            }
            console.log(results)
		} else {
			console.log('error submit!', fields)
		}
	})
}

</script>

<style lang="scss" scoped>
:deep(.el-card__body) {
	display: flex;
	flex-direction: column;
	flex: 1;
	height: inherit;
}
.el-form{
    flex:1;
    overflow-y: auto;
    position: relative;
}
.form-ele-size {
    width: 260px;
}

.line-title {
    font-size: 18px;
    padding: 8px 12px;
    background-color: #eceef0;
    border-radius: 6px;
    margin-bottom: 15px;
}

.selector-img {
    // width: 64px;
    // height: 64px;
    // border: 1px solid #ededed;
    // border-radius: 5px;
    // position: relative;
    // display: flex;
    // justify-content: center;
    // align-items: center;
    // &:hover {
    //     background-color: #f5f5f5;
    //     border: 1px solid #e4e3e3;
    // }
}
.typeBox{
    height: 65px;
    margin-right: 15px;
    border: 1px solid var(--el-border-color-light, #ebeef5);
    line-height: 24px;
    box-sizing: border-box;
    cursor: pointer;
    span:first-child{
        font-weight: 600;
    }
    span:last-child{
        font-weight: 500;
        color: var(--el-color-info-light-3);
    }
}
.typeBoxSelected {
    border: 1px solid var(--el-color-primary);
    position: relative;
    .virtual_san{
        position: absolute;
        bottom: 0;
        right: 0;
        width: 0;
        height: 0;
        border-bottom: 26px solid var(--el-color-primary);
        border-left: 26px solid transparent;
    }
    .virtual_dui{
        position: absolute;
        bottom: -2px;
        right: 2px;
        color: #fff;
        font-family: system-ui;
    }
}

:deep(.el-form .el-form-item:last-of-type){
    margin-bottom: 15px !important;
}
</style>
